<template>
  <el-dialog custom-class="eliminateAlarm"
             title="消除报警"
             append-to-body
             width="800px"
             :visible.sync="dialogVisible"
             :close-on-click-modal="false"
             class="user-view">
    <span slot="title"
          class="dialog-title">
      <span style="color:#81e8fe;font-size:20px;font-weight:bold;">消除报警</span>
      <img src="/static/dashboard/xiexian.png"
           alt />
    </span>
    <el-form ref="eliminateAlarmForm"
             :model="form"
             style=" padding-right: 40px;padding-top:40px;"
             label-width="140px"
             :rules="rules">
      <el-form-item label="消警原因"
                    prop="misReport">
        <el-select v-model="form.misReport"
                   placeholder="请选择消警原因"
                   filterable
                   style="width:100%">

          <el-option v-for="item in alarmReasonData"
                     :key="item.dictValue"
                     :label="item.dictText"
                     :value="item.dictValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="消警备注"
                    prop="eliminateReason">
        <el-input v-model="form.eliminateReason"
                  type="textarea"
                  placeholder="请输入消警备注"
                  :rows="3"></el-input>
      </el-form-item>
      <el-form-item label="操作人员"
                    prop="eliminateUser">
        <!-- <el-input v-model="form.eliminateUser" placeholder="请输入操作人员"></el-input> -->
        <el-select v-model="form.eliminateUser"
                   filterable
                   clearable
                   placeholder="请选择操作人员"
                   style="width:100%">

          <el-option v-for="item in userList"
                     :key="item.userId"
                     :label="item.trueName"
                     :value="item.trueName">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button type="warning"
                 plain
                 :loading="loading"
                 @click="onClose">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary"
                 plain
                 :loading="loading"
                 @click="handleSubmit">{{ $t('common.confirm') }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    systemMsg: {
      type: Object,
      default: null
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    alarmReasonData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // visible: false,
      viewInfoList: {},
      form: {
        misReport: '',
        eliminateReason: '',
        eliminateType: 1,
        eliminateUser: ''
      }, // eliminateType 是否消警，只有1
      loading: false,
      deleteId: '',
      userList: []
    }
  },
  computed: {
    rules() {
      return { misReport: [{ required: true, message: '请选择消警原因', trigger: 'change' }] }
    }
  },
  watch: {},
  mounted() {
    this.getUser()
  },
  methods: {
    getUser() {
      const url = 'system/user/normal'
      this.$get(url)
        .then(data => {
          this.userList = data.data.data.rows
        })
        .catch(e => {
          this.$message.error('获取数据失败，请联系管理员')
        })
    },
    init(row) {
      this.viewInfoList = row
    },
    // reset() {
    //   this.loading = false
    //   this.$refs['eliminateAlarmForm'].resetFields()
    // },
    onClose() {
      // this.reset()
      // this.visible = false
      this.loading = false
      this.$emit('close')
    },
    onSuccess() {
      this.loading = false
      this.$emit('success')
    },
    handleSubmit() {
      this.$refs['eliminateAlarmForm'].validate((err, values) => {
        if (err) {
          this.loading = true
          // const params = this.$util.deepClone(this.form)
          const url =
            this.systemMsg.alarmName === '巡检隔离报警'
              ? `alert/alertEquipmentCollectIsolation/batchEliminateByIds/${this.systemMsg.id}`
              : `alert/equipmentCollectAlert/batchEliminateByIds/${this.systemMsg.id}`
          try {
            this.$post(url, {
              ...this.form,
              ids: this.systemMsg.id
            })
              .then(() => {
                this.$message.success('消除报警成功')
                this.onSuccess()
              })
              .catch(() => {
                this.loading = false
              })
          } catch (e) {
            this.loading = false
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.eliminateAlarm {
  background-image: url("~@/assets/popup-bg.png");
  background-size: 100% 100%;
  background-color: transparent;
  .el-dialog__header {
    border-bottom: none;
    .dialog-title {
      color: #81e8fe;
      position: absolute;
      left: 30px;
      top: 30px;
    }
    .el-dialog__headerbtn {
      background: none;
      background-image: url("~@/assets/exit.png");
      background-size: 100% 100%;
      width: 46px;
      height: 46px;
      top: 22px;
      right: 32px;
    }
    // .el-icon-close {
    //   font-size: 20px;
    //   color: #81e8fe;
    // }
  }
  .el-dialog__body {
    .el-form-item__label {
      color: #fff;
    }
    .el-switch__label {
      color: #ccc;
    }
    .el-switch__label.is-active {
      color: #1890ff;
    }
    .el-radio__input.is-checked .el-radio__inner {
      border-color: #80e8e6;
      background: #80e8e6;
    }
    .el-radio__input.is-checked + .el-radio__label {
      color: #80e8e6;
    }
  }
  .dialog-footer {
    height: 60px;
    .buttonBox {
      margin-right: 30px;
    }
    .el-button {
      text-align: center;
      background: rgba(0, 185, 255, 0.3);
      border: 1px solid #11b3ff;
      border-radius: 2px;
      color: #ffffff;
      cursor: pointer;
    }
    .el-button:hover {
      background: #11b3ff;
    }
  }
}
/deep/.el-dialog__footer {
  padding-top: 0;
  padding-bottom: 50px;
  /deep/.dialog-footer {
    .buttonBox {
      margin-right: 30px;
    }
    .el-button {
      text-align: center;
      background: rgba(0, 185, 255, 0.3);
      border: 1px solid #11b3ff;
      border-radius: 2px;
      color: #ffffff;
      cursor: pointer;
    }
    .el-button:hover {
      background: #11b3ff;
    }
  }
}
/deep/.el-dialog__header {
  .el-dialog__title {
    color: #ffffff;
  }
}

/deep/.el-input-group__append,
/deep/.el-input-group__prepend {
  color: #00b1d6;
  background: rgba(0, 177, 214, 0.18);
  border: 1px solid rgba(0, 177, 214, 1);
}

/deep/.el-input__inner,
/deep/.el-textarea__inner {
  border: 1px solid rgba(0, 177, 214, 1);
  background: rgba(0, 177, 214, 0.18);
  color: #fff;
}

/deep/.el-form-item__label {
  color: #fff;
}
/deep/.el-radio__label {
  color: #fff;
}
.labelValue {
  color: #fff;
}
</style>
